<template>
  <div class="order">
    <div>
      <van-search
        class="search"
        shape="round"
        v-model="state.orderNo"
        placeholder="请输入订单号或团购券码"
        @search="onSearch"
      >
        <template #right-icon>
          <span class="c-red" @click="onSearch">查询</span>
          <span class="mlr-5">|</span>
          <span class="c-4387fb" @click="goDeliveryMap">查询配送范围 ></span>
        </template>
        <template #left>
          <span class="c-999 mr-10 fz-14" @click="onExit">退出</span>
        </template>
      </van-search>
      <van-tabs v-model:active="state.status" @change="onStatusChange" class="status-tabs">
        <van-tab :title="`全部${getLengthText('all')}`" name="all"></van-tab>
        <van-tab :title="`待签收${getLengthText('2')}`" name="2"></van-tab>
        <van-tab :title="`已签收${getLengthText('3')}`" name="3"></van-tab>
      </van-tabs>
    </div>

    <guide></guide>

    <div class="order-list" v-if="state.orderList && state.orderList.length">
      <orderItem v-for="(item, index) in state.orderList" :key="index" :orderData="item"></orderItem>
      <div class="c-999 ta-c mg-20">已经到底了~</div>
    </div>
    <van-empty v-else description="没有订单？订单号或团购码也可查询订单" />
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import orderItem from './components/orderItem.vue'
import guide from './components/guide.vue'
import { listMyOrder } from '@/api/common'
import { useRouter } from 'vue-router';
import { Toast, Dialog } from 'vant';
import { setLocations } from '@/utils/storage'
import { goDeliveryMap } from '@/utils/url'

export default defineComponent({
  name: 'OrderList',
  setup() {
    const router = useRouter()
    const state = reactive({
      orderNo: '',
      status: 'all',
      orderList: []
    })
    const onSearch = () => {
      getOrderList()
    }
    const getOrderList = () => {
      const params = {
        orderNo: state.orderNo,
        status: state.status === 'all' ? undefined : state.status
      }
      return listMyOrder(params).then(res => {
        if (res.code == 200) {
          state.orderList = res.data || []
          if (state.orderList && state.orderList.length === 0) {
            state.orderList.forEach((item) => {
              item.totalPriceYuan = (item.totalPrice / 100).toFixed(2);
            });
          }
        }
        return res
      })
    }
    getOrderList().then((res) => {
      if (res.code !== 401 && state.orderList.length === 0) {
        Dialog.alert({
          title: '主人您好',
          message: '美团外卖或饿了么平台的订单，有可能因虚拟号原因导致查询不到订单，您可以直接输入订单号进行查询哦！',
          theme: 'round-button',
        })
      }
    })

    const onExit = () => [
      Dialog.confirm({
        title: '提示',
        message: '是否退出该手机号！',
      })
        .then(() => {
          setLocations('accessToken', '')
          router.push({
            path: '/login'
          })
        })
    ]

    const onStatusChange = () => {
      getOrderList()
    }

    const getLengthText = (status) => {
      if (status === state.status && state.orderList && state.orderList.length) {
        return `（${state.orderList.length}）`
      } else {
        return ''
      }
    }
    return {
      state,
      onSearch,
      onStatusChange,
      getLengthText,
      onExit,
      goDeliveryMap,
    }
  },
  components: {
    orderItem,
    guide
  }
})
</script>

<style lang="less" scoped>
.order {
  min-height: 100vh;
  background: #f6f8f7;
  .search {
    border-bottom: 1px solid #f4f4f4;
  }
  .status-tabs {
    :deep(.van-tabs__nav) {
      .van-tab {
        color: #999;
        &.van-tab--active {
          color: #000;
        }
        &:not(:first-child)::before {
          content: ' ';
          display: inline-block;
          width: 1px;
          height: 12px;
          background: #999;
          position: absolute;
          left: 0;
        }
      }
    }
  }
  .order-list {
    padding: 10px;
    max-height: calc(100vh - 140px);
    overflow: auto;
    box-sizing: border-box;
  }
}
</style>
